<div class="header">
  <input id="txtGroupId" type="hidden" value="{{groupInfo.groupId}}">
  <input id="txtUserGroupRole" type="hidden" value="{{user_info.userGroupRole}}">
  <div class="wrapper">
    <ul>
      <li class="li_750">
        <div class="u_info">
          <div id="lblGroupPhoto" class="u_photo" style="
          {% if groupInfo.groupPhoto %}
            background-image:url({{groupInfo.groupPhoto}});
          {% endif %}
          ">
            <form action="" method="POST" enctype="multipart/form-data">
                <fieldset>
                    <a href="javascript:void(0);">
                        <img src="../static/images/photo_mask.png" alt=""/>
                        <input id="btnUpload" name="file" type="file" title="{{pageRes.btnUploadTitle}}:200*200px" value="" />
                    </a>
                </fieldset>
            </form>
             <!-- <a href="###">
               <img src="../static/images/photo_mask.png" alt=""/>         
             </a> -->
           </div>
          <div class="u_detail groupPro">
            <dl>
              <dd></dd>
              <dd>
                <em class="icon_name"></em>
                <span class="pro_desc">
                {% if groupInfo.groupName %}{{groupInfo.groupName}}{% else %}{{pageRes.lblGroupName}}{% endif %}
                </span>
                <input id="txtName" class="pro_edit txt_edit" type="text" default-value="{{pageRes.lblGroupName}}" value="{% if groupInfo.groupName %}{{groupInfo.groupName}}{% else %}{{pageRes.lblGroupName}}{% endif %}" >
              </dd>
              <dd id="groupRegion" attr-field="location">
                <em class="icon_location"></em>
                <span class="pro_desc"  field-value="{% if groupInfo.groupLocation %}{{groupInfo.groupLocation}}{% else %}0,0{% endif %}">{{pageRes.lblGroupLocation}}</span>
                <span class="pro_edit">
                  <select id="provice"></select>
                  <select id="city"></select>
                </span>
              </dd>
              <dd>
                <em class="icon_openness"></em>
                <label><input id="chkOpenness" type="checkbox" {% if groupInfo.groupOpenness == 1 %}checked="checked"{% endif %} value="" />{{pageRes.lblPublicGroup}}</label>
              </dd>
            </dl>
            <div class="operate_btn">
                {% if groupInfo.groupId %}
                  <a id="btnConfirm" href="###" class="button">{{pageRes.linkModify}}</a>
                  {% if user_info.userGroupRole == 1 %}
                  <a id="btnInvite" href="/social/group_member?groupId={{groupInfo.groupId}}" class="button">{{pageRes.linkInviteFriend}}</a>
                  {% elif user_info.userGroupRole == 2 %}
                  <a  id="btnInvite" href="/social/group_member?groupId={{groupInfo.groupId}}" class="button">{{pageRes.linkInviteFriend}}</a>
                  <a id="btnQuit" href="###" class="button">{{pageRes.linkQuit}}</a>
                  {% endif %}
                {% else %}
                  <a id="btnConfirm" href="###" class="button">{{pageRes.linkConfirm}}</a>
                {% endif %}
            </div>

          </div>
        </div>
      </li>
      <li class="li_250">
        <div class="u_group">
          <div class="notice_bg">
            <div class="notice_content">
              <p>
                <p class="pro_desc">
                  {% if groupInfo.groupContent %}{{groupInfo.groupContent}}{% else %}{{pageRes.lblGroupDesc}}{% endif %}
                </p>
                <textarea id="txtContent" class="pro_edit pro_con txt_edit" cols="9" rows="5" default-value="{{pageRes.lblGroupDesc}}">{% if groupInfo.groupContent %}{{groupInfo.groupContent}}{% else %}{{pageRes.lblGroupDesc}}{% endif %}</textarea>
              </p>
            </div>
          </div>
          <div id="searchContainer" class="u_search" style="display:none;">
              <input id="txtSearch" type="text" default-value="{{pageRes.inputSearchFriend}}" value="{{pageRes.inputSearchFriend}}"/>
              <a id="btnSearch" href="###" class="search"></a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.iframe-transport.js"></script>
  <!-- The basic File Upload plugin -->
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.fileupload.js"></script>
  <!-- The File Upload validation plugin -->
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.fileupload-process.js"></script>
  <script type="text/javascript" src="../static/scripts/dependency/fileupload/jquery.fileupload-validate.js"></script>
<script type="text/javascript">
  $(function() {
    var $provice = $("#provice"),
        $city = $("#city"),
        $txtName = $("#txtName"),
        $txtContent = $("#txtContent"),
        $txtGroupId = $("#txtGroupId"),
        $txtSearch = $("#txtSearch"),
        $chkOpenness = $("#chkOpenness"),
        $btnConfirm = $("#btnConfirm"),
        $btnInvite = $("#btnInvite"),
        $headerContainer = $(".header");

    var _groupId = parseInt($txtGroupId.val());
    var socialActions = nsbase.config.actionUrl.social,
        regions = nsbase.config.region,
        utilities = nsbase.utility,
        openness = parseInt({{groupInfo.groupOpenness}});

      initGroupPro();
      function initGroupPro () {
        initRegion();
        bindUpload();
        //$chkOpenness.prop("checked",openness == 1);
        var $groupProContainer = $(".groupPro");
        $('.pro_desc').click(function() {
          var sender = $(this),
            $editContainer = sender.next('.pro_edit');
          sender.hide();
          $editContainer.show();
        });

        $btnConfirm.click(function() {
          var groupInfo = getGroupInfo();
          if(groupInfo.groupName == ""){
            utilities.errorDialog({{pageRes.msgGroupName}});//亲!给您的群起个响亮的名字吧!
            return;
          }
          
          $headerContainer.mask();
          nsbase.ajax.request(socialActions.updateGroupInfo, groupInfo, function(result) {
            $headerContainer.unmask();
            if(result.success){
              $txtName.hide();
              $txtName.prev(".pro_desc").text(groupInfo.groupName).show();

              $txtContent.hide();
              $txtContent.prev(".pro_desc").text(groupInfo.groupContent).show();
              
              var region = getRegion();
              var groupLoaction = region.proviceName + (region.cityName? " · " + region.cityName: "");
              var $groupRegion = $("#groupRegion");
              $groupRegion.find('.pro_edit').hide();
              $groupRegion.find(".pro_desc").text(groupLoaction).show();

              _groupId = result.data;
              if(!$txtGroupId.val()){
                $btnInvite.removeClass('disabled');
                $txtGroupId.val(_groupId);
                utilities.errorDialog({{pageRes.msgCreateSuccess}});//您的群已创建成功啦!
              } else{
                utilities.errorDialog({{pageRes.msgUpdateSuccess}});//群信息修改成功
              }
            } else {
              utilities.errorDialog(result.message);
            }

          },function(){
            $headerContainer.unmask();
          });
        });

        $txtContent.blur(function() {
          if(!_groupId){
            return;
          }
          var param = {
            groupId:_groupId,
            groupContent:$txtContent.val()
          }
          nsbase.ajax.request(socialActions.updateGroupContent, param, function(result) {
            $headerContainer.unmask();
            if(result.success){
              $txtContent.hide();
              $txtContent.prev(".pro_desc").text(param.groupContent).show();
            }
          },function(){
            $headerContainer.unmask();
          });
        });

        $txtSearch.focus(function(){
          var sender = $(this);
          var defaultValue = sender.attr("default-value");
          var value = sender.val();
          if(value == defaultValue){
            sender.val("");
          }
        }).blur(function() {
          var searchValue = $txtSearch.val();
          if(!searchValue){
            $txtSearch.val($txtSearch.attr("default-value"));
          }
        });
        
      }

    function initRegion () {
      var $regionContainer = $("#groupRegion");
      var locationCode = $regionContainer.find(".pro_desc").attr("field-value");
      var regionCodes = locationCode.split(",");
      regionCodes = regionCodes?regionCodes:['0','0'];
      var provCode = regionCodes[0];
      var cityCode = regionCodes[1];
      bindProvince();
      bindCity(provCode,cityCode);
      if(provCode !== '0'){
        $provice.val(provCode);

        // 绑定页面展示
        var region = nsbase.ui.utility.getRegion(provCode,cityCode);
            var loaction = region.provName + (region.cityName? " · " + region.cityName: "");
        $regionContainer.find(".pro_desc").text(loaction);
      } 

      $provice.change(function(){
        var provCode = $(this).val();
        bindCity(provCode);
      });
    }

    function bindProvince () {
      $provice.append('<option value="'+ regions.code0 +'">'+ regions.prov0 +'</option>');
      var provinces = regions.provinces.split(","),
        provCodes = regions.provcodes.split(",");
      for (var i = 0; i < provinces.length; i++) {
        $provice.append('<option value="'+ provCodes[i] +'">'+ provinces[i] +'</option>');
      }
      
    }
    function bindCity (provCode,cityCode) {
      if(provCode === '0') {
        $city.hide();
        return;
      }
      $city.empty();
      $city.show();
      if(!regions["prov"+provCode]) return;
      
      var cityCodes = regions["code"+ provCode].split(","),
            cityNames = regions["prov"+ provCode].split(",");
          for (var i = 0; i < cityNames.length; i++) {
        $city.append('<option value="'+ cityCodes[i] +'">'+ cityNames[i] +'</option>');
      }
      if(cityCode !== '0'){
        $city.val(cityCode);
      }
    }
    function getRegion(){
      var region ={
        proviceName:$provice.find("option:selected").text(),
        proviceCode:$provice.val(),
        cityName:$city.find("option:selected").text(),
        cityCode:$city.val()
      }
      return region;
    }
    function bindUpload () {
      $("#btnUpload").fileupload({
            url: socialActions.imageUpload,
            dataType: 'json',
            // autoUpload: false,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            maxFileSize: 1000000, //5000000, // 5 MB
            // minFileSize:0,
            messages:{
              acceptFileTypes: {{pageRes.uploadFileType}},//'上传文件类型只能为:gif、jpg、png格式',
                  maxFileSize: {{pageRes.uploadFileSize}}//'上传文件最大为1M'
            },
            processfail:function(e,data){
              if(data.files.error){
                utilities.errorDialog(data.files[0].error);
              }
            },
            done: function (e, data) {
              if(data.result.success){
                $(".u_photo").css("background-image","url(.."+ data.result.data +")");
              } else {
                utilities.errorDialog(data.result.message);
              }
            },
            fail:function(e,data){
          utilities.errorDialog({{pageRes.msgUploadFail}})//上传失败,请重新上传!
            }
        }).on("validate");
    }

    function getGroupInfo () {
      var region = getRegion();
      var groupPhoto = utilities.getBackgroundImage($("#lblGroupPhoto").attr("style"));
      
      if(groupPhoto){
        groupPhoto = utilities.trimStart(groupPhoto,"[\.]{2}");
      } else {
        groupPhoto = "";
      }

      
      var groupName = $txtName.val(),
        groupContent = $txtContent.val();

      if(groupName == $txtName.attr("default-value")){
        groupName = "";
      }
      if(groupContent == $txtContent.attr("default-value")){
        groupContent = "";
      }
      var groupInfo = {
        groupId:_groupId,
        groupName:groupName,
        groupLocation: region.proviceCode + "," + (region.cityCode?region.cityCode:0),
        groupPhoto:groupPhoto,
        groupContent:groupContent,
        groupOpenness:$chkOpenness.prop("checked")?1:0
      };

      return groupInfo;
    }
  });
</script>